<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性，方法，侦听器</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{fullName}}
			{{age}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					firstName : 'Dell',
					lastName : 'Lee',
					fullName :"Dell Lee",
					age : 28
				},
				/* 侦听器只正对值，有缓存 */
				watch:{
					firstName: function(){
						console.log("计算了一次");
						this.fullName = this.firstName + " " + this.lastName;
					},
					lastName: function(){
						console.log("计算了一次");
						this.fullName = this.firstName + " " + this.lastName;
					}
				}
				/* 使用方法，无缓存，任意值改变均会刷新 */
				/* methods:{
					fullName : function(){
						console.log("计算了一次");
						return this.firstName + " " + this.lastName;
					}
				}, */
				/* 使用计算属性时，有缓存，在不改变firstName与lastName值得情况下不会进行刷新，优先使用（更加简洁） */
				/* computed:{
					fullName : function(){
						console.log("计算了一次");
						return this.firstName + " " + this.lastName;
					}
				} */
			});
		</script>
	</body>
</html>
